<template>
    <div id="coordinateReal" style="position: relative;">
        <div class="coorder-position">
            <div class="location-bar-content">
                <div>视高：{{(height/1000).toFixed(2)}}米</div>
                <div>方向：{{direction}}度</div>
                <div>海拔：{{altitude}}米</div>
                <div>经度：{{longitude}}</div>
                <div>纬度：{{latitude}}</div>
            </div>
        </div>
    </div>

</template>

<script>
    import {
        ScreenSpaceEventHandler,
        Math,
        ScreenSpaceEventType,
        defined,
        Cartographic,
        EllipsoidGeodesic,
        Cartesian2
    } from 'cesium'

    export default {
        name: 'realCoordinateThree',
        //存放 数据
        data: function () {
            return {
                longitude: 0,
                latitude: 0,
                altitude: 0,
                height: 0,
                direction: 0,
                distanceLabel: undefined,
                barWidth: undefined,
                functionTipInfo: ''
            }
        },
        computed: {
            //视图初始化状态监听
            viewerReadyEvent() {
                return this.$store.getters.cesiumViewerStatus
            },
        },
        watch: {
            viewerReadyEvent(val) {
                if (window.viewer || val) {
                    this.init()
                }
            }
        },
        //存放 方法
        methods: {
            /**
             * 初始化事件监听
             */
            init() {
                let that = this
                let viewer = window.viewer
                //  监听相机状态
                let handler = new ScreenSpaceEventHandler(viewer.scene.canvas)

                // 场景变化监听事件(比例尺用)
                viewer.scene.postRender.addEventListener(function () {
                    that.cesiumScale()
                })

                //中键滚动
                handler.setInputAction(function (movement) {
                    let position = viewer.camera.positionCartographic

                    that.resetPosition(position)
                    that.resetHeight(position)

                    that.direction = that.resetDirection(viewer.camera.heading)
                }, ScreenSpaceEventType.WHEEL)

                //中键抬起
                handler.setInputAction(function (movement) {
                    let position = viewer.camera.positionCartographic

                    that.resetPosition(position)
                    that.resetHeight(position)

                    that.direction = that.resetDirection(viewer.camera.heading)
                }, ScreenSpaceEventType.MIDDLE_UP)
                //左键抬起监听位置
                handler.setInputAction(function (movement) {
                    var ray = viewer.camera.getPickRay(movement.position)
                    var cartesian = viewer.scene.globe.pick(ray, viewer.scene)

                    if (defined(cartesian)) {
                        let cartographic = Cartographic.fromCartesian(cartesian)
                        let position = viewer.camera.positionCartographic
                        that.height = Math.toDegrees(position.height).toFixed(2)
                        that.resetPosition(cartographic)
                        that.direction = that.resetDirection(viewer.camera.heading)
                    } else {
                        return false
                    }
                }, ScreenSpaceEventType.LEFT_UP)

                //右键点击监听位置
                handler.setInputAction(function (movement) {
                    var ray = viewer.camera.getPickRay(movement.position)
                    var cartesian = viewer.scene.globe.pick(ray, viewer.scene)

                    if (defined(cartesian)) {
                        let cartographic = Cartographic.fromCartesian(cartesian)
                        let position = viewer.camera.positionCartographic
                        that.height = Math.toDegrees(position.height).toFixed(2)
                        that.resetPosition(cartographic)
                        that.direction = that.resetDirection(viewer.camera.heading)
                    } else {
                        return false
                    }
                }, ScreenSpaceEventType.RIGHT_CLICK)

            },
            /**
             * 重置坐标位置信息
             * @param position
             */
            resetPosition(position) {
                let self = this
                let viewer = window.viewer
                this.longitude = Math.toDegrees(position.longitude).toFixed(6)
                this.latitude = Math.toDegrees(position.latitude).toFixed(6)
                let altitude = viewer.scene.globe.getHeight(
                    Cartographic.fromDegrees(Number(this.longitude), Number(this.latitude)));

                (altitude < 0) ? (this.altitude = 0) : (this.altitude = Number(altitude).toFixed(2))

                this.$store.commit('SET_CESIUM_LOCATION', {
                    longitude: Number(self.longitude),
                    latitude: Number(self.latitude),
                    altitude: Number(self.altitude)
                })
            },
            /**
             * 重置视角高度
             * @param position
             */
            resetHeight(position) {
                this.height = Math.toDegrees(position.height).toFixed(2)
            },
            /**
             * 重置方向信息
             * @param heading
             * @returns {string}
             */
            resetDirection(heading) {
                return Math.toDegrees(heading).toFixed(0)
            },
            /**
             * 计算比例尺信息
             */
            cesiumScale() {
                var geodesic = new EllipsoidGeodesic()
                var distances = [
                    1,
                    2,
                    3,
                    5,
                    10,
                    20,
                    30,
                    50,
                    100,
                    200,
                    300,
                    500,
                    1000,
                    2000,
                    3000,
                    5000,
                    10000,
                    20000,
                    30000,
                    50000,
                    100000,
                    200000,
                    300000,
                    500000,
                    1000000,
                    2000000,
                    3000000,
                    5000000,
                    10000000,
                    20000000,
                    30000000,
                    50000000
                ]
                // Find the distance between two pixels at the bottom center of the screen.
                let scene = viewer.scene
                let width = scene.canvas.clientWidth
                let height = scene.canvas.clientHeight
                let left = scene.camera.getPickRay(
                    new Cartesian2((width / 2) | 0, height - 1)
                )
                let right = scene.camera.getPickRay(
                    new Cartesian2((1 + width / 2) | 0, height - 1)
                )
                let globe = scene.globe
                let leftPosition = globe.pick(left, scene)
                let rightPosition = globe.pick(right, scene)
                if (!defined(leftPosition) || !defined(rightPosition)) {
                    this.barWidth = undefined
                    this.distanceLabel = undefined
                    return
                }
                let leftCartographic = globe.ellipsoid.cartesianToCartographic(
                    leftPosition
                )
                let rightCartographic = globe.ellipsoid.cartesianToCartographic(
                    rightPosition
                )
                geodesic.setEndPoints(leftCartographic, rightCartographic)
                let pixelDistance = geodesic.surfaceDistance
                // Find the first distance that makes the scale bar less than 100 pixels.
                let maxBarWidth = 100
                let distance
                for (
                    let i = distances.length - 1;
                    !defined(distance) && i >= 0;
                    --i
                ) {
                    if (distances[i] / pixelDistance < maxBarWidth) {
                        distance = distances[i]
                    }
                }
                if (defined(distance)) {
                    var label =
                        distance >= 1000
                            ? (distance / 1000).toString() + ' km'
                            : distance.toString() + ' m'
                    this.barWidth = (distance / pixelDistance) | 0
                    this.distanceLabel = label
                } else {
                    this.barWidth = undefined
                    this.distanceLabel = undefined
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .coorder-position {
        position: absolute;
        margin: 0px;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 25px;
        z-index: 5;
        color: white;
        //padding: 3px 10px;
        padding: 0px 0px;
        font-size: 13px;
        text-shadow: 2px 2px 2px #000;
        background-color: rgba(0, 0, 0, .8);
        pointer-events: none;

        .functionToolTip {
            float: left;
            margin-left: 100px;
            margin-top: 5px;
        }

        .location-bar-content {
            float: right;

            div {
                float: left;
                margin-top: 5px;
                min-width: 80px;
                margin-right: 20px;

                .scale-bar {
                    position: relative;
                    padding-top: 10px;
                }

                .scale-bar::after {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 10px;
                    border: 1px solid #fff;
                    border-top: none;
                    left: 0;
                    bottom: 0;
                }

                .scale-label {
                    font-size: 12px;
                    color: #fff;
                    text-align: center;
                    position: absolute;
                    bottom: 8px;
                }
            }
        }
    }
</style>
